<template>
	<view>

		<view style="width: 100vw;" class="bg-FFFFFF" :style="{transform:get_bottom}">
			<view class="flex flex-y-center bg-FFFFFF color-999999" style="padding:24rpx 0;">
				<view class="flex-1 ml-30  input-box no-scroll" style="margin-right: 30rpx;"
					:style="isIos?'padding:10rpx 28rpx;':''">
					<textarea confirm-type="send" :confirm-hold="true" @confirm="input_confirm"
						:show-confirm-bar="false" :focus="focus" @focus="input_focus" @blur="input_blur"
						:hold-keyboard="true" placeholder-class="font" @keyboardheightchange="keyboardheightchange"
						:adjust-position="false" class="textarea1" placeholder-style="color: #999;" :autoHeight="true"
						v-model="message" :placeholder="input_p || '写评论'" @linechange="linechange"
						:maxlength="length"></textarea>
				</view>
				<view @tap.stop="to_like" class="flex flex-y flex-x-y" style="margin-right:50rpx;">
					<view class="iconfont icon-zan" style="font-size: 26rpx;" :style="liked ?'color: #07ABA1;':''">
					</view>
					<view class="fs-24" style="line-height: 30rpx;" :style="liked ?'color: #07ABA1;':''">点赞</view>
				</view>
				<view v-if="!hideShare && !show_btn" class="flex flex-y flex-x-y pr" style="margin-right:50rpx;">
					<view class="iconfont icon-fenxiang1" style="font-size: 22rpx;"></view>
					<view class="fs-24" style="line-height: 30rpx;">分享</view>
					<button @tap.stop="to_share_app" v-if="info && info.image"
						style="width: 100%;height:100%;position: absolute;top: 0;opacity: 0;" data-sharetype="active"
						:data-image="info.image" :data-aid="info.id" :data-title="info.detail"
						open-type="share"></button>
				</view>

				<view v-else @tap.stop="input_confirm" class="send-btn-1">发送</view>
				<!-- 				<view v-else @touchend.prevent="input_confirm" class="send-btn-1">发送</view> -->
			</view>
			<!-- <view :style="{height:bottom+'px'}"></view> -->
			<view style="height: 28rpx;" class="bg-FFFFFF"></view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "comment-input",
		mounted() {
			this.keyword_height = uni.getStorageSync('keyword_height') || 0;
		},
		data() {
			return {
				message: '',
				bottom: 0,
				focus: false,
				bottom2: 0,
				to_id: '',
				to_name: '',
				im_id: '',
				liked: 0,
				item: null,
				index1: 0,
				index2: 0,
				input_p: '',
				keyword_height: 0,

				isIos: false,

			};
		},
		props: {
			info: {
				type: Object,
				default: () => {
					image: []
				}
			},
			list: {
				type: Array,
				default: () => []
			},
			length: {
				type: Number,
				default: 50,
			},
			commentType: {
				type: [Number, String],
				default: '',
			},
			hideShare: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			bottom(value) {
				// this.$emit('heightChange', value + this.bottom2);
			},
			bottom2(value) {
				// this.$emit('heightChange', value + this.bottom);
			}

		},
		computed: {
			show_btn() {
				return String(this.message).trim();
			},
			get_bottom() {
				return 'translateY(-' + this.bottom + 'px)';
			}
		},
		created() {

			if (uni.getSystemInfoSync().platform == 'ios') {
				this.ios = true;
				// console.log('ssssssssssssssssss,',this.ios);
				// #ifdef MP-WEIXIN
				this.isIos = true;
				// #endif
			}
		},

		methods: {
			keyboardheightchange(e) {
				console.log('e.detail.height', e.detail.height);
				// #ifdef H5
				this.bottom = Math.random();
				// #endif

				// #ifndef H5
				this.bottom = e.detail.height || 0;
				if (!this.keyword_height) {
					this.keyword_height = e.detail.height;
					uni.setStorage({
						key: 'keyword_height',
						data: e.detail.height
					})
				}
				if (e.detail.height <= 0) {
					this.input_blur();
				}
				// this.showToast('bottom' + this.bottom);
				// #endif
				return;
				if (!this.ios) {
					this.bottom = e.detail.height || 0;
				} else {
					this.bottom = Math.random();
				}


			},
			input_focus() {
				this.login();
				this.more = false;
				this.bqb = false;
				this.focus = true;
				if (this.keyword_height) {
					this.bottom = this.keyword_height;
				}

				// if (this.ios) {
				// 	setTimeout(() => {
				// 		this.bottom = Math.random();
				// 	}, 300);
				// }

				// #ifdef H5
				this.$emit('heightChange', 1 + this.bottom2 + this.bottom);
				// #endif
			},
			input_blur() {
				this.focus = false;
				this.$nextTick(() => {
					this.bottom = 0;
				})
			},
			input_confirm() {

				if (!this.message.trim()) {
					return;
				}
				let time_now = new Date().getTime();
				if (!this.time2 || (time_now - this.time2) > 1500) {
					this.time2 = time_now;
					let message = this.message.trim();
					this.message = '';

					this.$nextTick(() => {
						// this.focus = true;
						this.message = '';

					});

					if (this.login()) return;
					this.send_comment(message);
				} else {
					this.showToast('语速太快了哦!');
				}

			},
			linechange() {
				// 行高发生改变
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this).select('.input-box').boundingClientRect(data => {
						console.log('input-box', data);
						let height_default = uni.upx2px(80);
						let height_now = Math.round(data.height);
						if (height_now <= height_default) {
							this.bottom2 = 0;
						} else {
							this.bottom2 = height_now - height_default;
						}
					}).exec();
				});
			},
			send_comment(message) {
				console.log('this.info', this.info);
				this.less(() => {
					this.request({
						url: '/zhoudao/zdAActivityUser',
						method: 'POST',
						data: {
							activityId: this.info.activityId || this.info.id,
							imId: this.im_id || '',
							userId: this.user_info.id,
							toId: this.to_id,
							type: this.im_id ? 2 : 1, //1主评论 2子评论
							detail: message
						}
					}).then(res => {
						if (!this.rsuccess(res)) return;

						this.showToast('评论成功', 1000);
						if (this.commentType == 1) {
							//如果评论一次
							this.$emit('add');
							return;
						}

						let row = {
							id: res.data,
							activityId: this.info.id,
							createTime: new Date().getTime(),
							detail: message,
							likes: 0,
							sonList: null,
							sonNum: 0,
							toAvatarUrl: this.item ? this.item.userAvatarUrl : '',
							toId: this.item ? this.item.userId : '',
							toName: this.item ? this.item.userName : '',
							type: this.item ? 1 : 2,
							userAvatarUrl: this.user_info.avatarUrl,
							userId: this.user_info.id,
							userName: this.user_info.name,
							userIsShop: this.info.shopId == this.user_info.shopId,
						};

						if (this.item) {
							//二级评论
							this.$emit('add');
							let sonList = this.list[this.index1].sonList || [];
							sonList.push(row);
							this.list[this.index1].sonNum += 1;
							this.list[this.index1].sonList = sonList;
							// this.list = this.clone(this.list);
							this.$emit('changeValue', {
								key: 'comment_list',
								value: this.list
							});
						} else {
							//一级评论

							this.$emit('add');
							this.list.unshift(row);
							this.$emit('changeValue', {
								key: 'comment_list',
								value: this.list
							});
						}

						this.init_data();
					});
				});
			},
			open(item) {
				console.log('open', item);
				if (item) {

					this.setData({
						to_id: item.userId || '',
						im_id: item.imId,
						liked: item.liked,
						item: null,
					});
				} else {
					this.setData({
						to_id: '',
						im_id: '',
						liked: false,
						item: null,
					});
				}
			},
			set_index(obj) {
				console.log('sonList', obj);
				this.index1 = obj.index1;
				this.index2 = obj.index2;
				this.item = this.clone(obj.item);
				this.to_id = obj.item.userId;
				this.im_id = obj.item.id;
				this.input_p = this.get_pr_text(obj.item);
				this.$nextTick(() => {
					this.focus = true;
				});
			},
			init_data() {
				this.setData({
					index1: 0,
					index2: 0,
					to_id: '',
					im_id: '',
					input_p: '',
					item: null,
				});
			},
			to_like(item) {

				if (!this.login()) {
					this.click(() => {
						this.request({
							url: !this.liked ? `/zhoudao/zdAActivityUser/addLikes/${this.info.id}` :
								`/zhoudao/zdAActivityUser/delLikes/${this.info.id}`,
							data: {},
							method: 'POST',
						}).then(res => {
							if (!this.rsuccess(res)) return;
							this.liked = !this.liked;



							this.$emit('inputLike', {
								liked: this.liked,
							})

						});
					});


				}
			},
			get_pr_text(item) {
				let str = '@' + item.userName + ' ';
				let str2 = String(item.detail);
				if (str2.length > 10) {
					str += str2.substring(0, 10) + '...';
				} else {
					str += str2;
				}
				return str;
			},
			to_share_app(item) {
				// #ifdef MP-WEIXIN
				return;
				// #endif
				let path = `pages/store/active?id=${this.info.id}`;
				let title = this.info.detail;
				this.shareApp(path, title);
			}

		}
	}
</script>

<style>
	.input-box {

		background: #f7f7f7;
		border-radius: 16rpx;

		background: #F7F7F7;
		padding: 0rpx 28rpx;
		max-height: 200rpx;
		overflow-y: scroll;
		padding-top: 18rpx;
		padding-bottom: 18rpx;

	}

	.textarea1 {
		padding: 0;
		font-size: 30rpx;
		line-height: 44rpx;
		flex: 1;
		width: 100%;

		color: #333;
		text-align: justify;
		word-break: break-word;
		min-height: 44rpx;
		max-height: 164rpx;

	}

	.send-btn-1 {
		width: 100rpx;
		height: 60rpx;
		background-color: #83FDF7;
		border-radius: 6rpx;
		color: #333;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		animation: send 0.4s;
		white-space: nowrap;
		overflow: hidden;
		margin-right: 30rpx;
	}

	@keyframes send {
		0% {
			width: 60rpx;
		}

		100% {
			width: 100rpx;
		}
	}
</style>
